<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="职位详情" :isAppBtn="false">
			<template v-if="isApp && detail.auditStatus == 1"><view slot="right" class="share fboxRow Ycenter Xend" @click="shareTap">
				<text class="bwfont bw-zhuanfa font30"></text>
			</view></template>
		</HeadCustom>
		<view class="wrap">
			<view v-if="detail.auditStatus == 0" class="prompt mt24 fboxRow lh38 font26 color-E8CDA7"> 
			<u-icon name="error-circle" color="#E8CDA7"></u-icon> <view class="ml10">
				温馨提示：招聘信息审核中，通过后生效。
			</view>
			</view>
			<view v-if="detail.auditStatus == 2" class="prompt mt24 fboxRow Ystart lh38 font26 color-E8CDA7"> <u-icon name="error-circle" color="#E8CDA7"></u-icon><view class="ml10">
				温馨提示：您发布的招聘信息，平台审核未通过。原因：{{detail.auditRemark}}
			</view></view>
			
			<view class="card mt40 jobInfo fboxRow">
				<view class="fboxCol flex1">
					<view class="title font42">{{detail.jobName}}</view>
					<view class="info mt8 lh38 color-6B707C font26">
						{{detail.workArea}} 
						<text class="ml24">{{gainData(detail.workExperience, 'workExperience').label}}</text>
						<text class="ml24">{{gainData(detail.minEducation, 'educationList').label}}</text>
					</view>
				</view>
				<view class="salary fboxRow Xend color-E8CDA7 font38">
					<template v-if="detail.salaryMin == 0 ">面议</template>
					<template v-else>
						 {{unitNum(detail.salaryMin)}}- {{unitNum(detail.salaryMax)}}
					</template>
				</view>
			</view>
			<view class="line"></view>
			<view class="card">
				<view class="fboxRow Ycenter">
					<view class="tit font38 font-weight flex1 color-E8CDA7">职位详情</view>
				</view>
				<view class="con mt16 font30">
					<view class="tags">
						<Tags :list="detail.jobKeywordList" />
					</view>
					<view class=" mt32 lh44 color-ACB4C7">
						<view  style="white-space: pre-wrap;" v-html="detail.jobDesc"></view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="card">
				<view class=" fboxRow Ycenter">
					<view class="tit font38 font-weight flex1 color-E8CDA7">所在公司</view>
				</view>
				<view class="bd mt24 fboxRow Ycenter font26">
					<image class="logo" :src="detail.companyLogo" mode="aspectFill"></image>
					<view class="fboxCol flex1">
						<view class="font30 lh44">{{detail.companyName}}</view>
						<view class="font26 color-6B707C lh38">{{detail.industryName}}</view>
						<view class="font26 font-ell1 color-6B707C lh38">{{detail.workAddress}}</view>
					</view>
					<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
				</view>
				<view class="map mt32">
					<DetailMap pattern="border-radius: 12rpx;" :longitude="detail.longitude" :latitude="detail.latitude" :address="detail.workAddress" />
<!--					<DetailMap pattern="width: 670rpx;height: 352rpx;border-radius: 12rpx;" :longitude="detail.longitude" :latitude="detail.latitude" :address="detail.workAddress" />-->
				</view>
			</view>
			<view class="line"></view>
			<view class="card fboxCol">
				<view class="tit font38 font-weight flex1 color-E8CDA7">职位招聘数据</view>
				<view class="mt40 fboxRow Ycenter">
					<view class="flex1 fboxCol Xcenter Ycenter">
						<view class="color-E8CDA7 font40">{{detail.communicateCount}}</view>
						<view class="color-ACB4C7 mt8 font26 lh38">沟通过</view>
					</view>
					<view class="flex1 fboxCol Xcenter Ycenter">
						<view class="color-E8CDA7 font40">{{detail.browseCount}}</view>
						<view class="color-ACB4C7 mt8 font26 lh38">查看过</view>
					</view>
					<view class="flex1 fboxCol Xcenter Ycenter">
						<view class="color-E8CDA7 font40">{{detail.collectCount}}</view>
						<view class="color-ACB4C7 mt8 font26 lh38">感兴趣</view>
					</view>
					<!-- <view class="flex1 fboxCol Xcenter Ycenter">
						<view class="color-E8CDA7 font40">15</view>
						<view class="color-ACB4C7 mt8 font26 lh38">分享查看</view>
					</view> -->
				</view>
			</view>
			<BottomFixed>
				<view class="btn-group-inner flex1 fboxRow Ycenter Xcenter">
					<view class="btn flex1 fboxRow Ycenter Xcenter font30 bg-border-btn" :class="[detail.jobStatus != 2 ? 'opacity35' : '']" @click="goPage">编辑</view>
					<view v-if="detail.jobStatus == 1" class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="closeJob">关闭职位</view>
					<view v-else class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" :class="[detail.auditStatus == 1 ? '' : 'opacity35']" @click="openJob">开放职位</view>
				</view>
			</BottomFixed>
		</view>
	</view>
</template>

<script>
	import {jobDetail, postJobStatus} from '@/api/recruit.js';
	import {gainData} from '../common/config.js';
	import Tags from '../components/tags.vue';
	import DetailMap from '../components/detail-map.vue';
	import {unitNum} from '@/static/js/common.js';
	import BottomFixed from '@/components/bottom-btn/fixed.vue'
	export default {
		components:{Tags, DetailMap, BottomFixed},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				gainData,
				unitNum,
				detail: {},
				id: '',
				isApp: 0
			}
		},
		onLoad(options) {
			if(options && options.id){
				this.id = options.id
			}
			if(options && options.isApp){
				this.isApp = options.isApp == 1 ? true : false
			}else{
				const {bw_link} = getApp().getBWData(['bw_link'])
				this.isApp = bw_link.isApp == 1 ? true : false
			}
		},
		onShow() {
			this.getInit()
		},
		onUnload() {
			console.log('B页面------onUnload')
		},
		methods: {
			shareTap(){
				const {companyLogo, id, jobName, companyName,salaryMax, salaryMin, workAddress,workArea, jobDesc, workExperience,minEducation} = this.detail
				const href = window.location.href
				const url = href.substr(0, href.indexOf("?")) +'?id='+this.id
				const data = {type: 'share', pageType: 'resume',  url: url,
					 companyLogo,jobName,companyName,workAddress, jobDesc,workArea,id,
					 salary: salaryMin ? unitNum(salaryMin) +'-'+ unitNum(salaryMax) : '面议',
					 workExperience:gainData(workExperience, 'workExperience').label,
					 minEducation:gainData(minEducation, 'educationList').label
				 }
				this.$bridge.callHandler('appHandler', data, (res) => {
					console.log('appHandler', '返回', res)
				})
			},
			getInit() {
				jobDetail({id: this.id}).then(res=>{
					this.detail = res.data
				})
			},
			goPage(){
				getApp().globalData.recruitmentTemp = this.detail
				if(this.detail.jobStatus == 2 && this.detail.auditStatus == 1 ){
					this.$pageTo('/recruit/enterprise/publishRecruitment?id='+this.detail.id)
				}else if(this.detail.auditStatus!= 1){
					this.$pageTo('/recruit/enterprise/process',{id: this.detail.id})
				}else{
					const tit = this.detail.auditStatus == 0 ? '您发布的招聘信息审核中' : '请先关闭职位后操作'
					uni.showToast({
						icon: 'none',
						title: tit
					})
				}
				
			},
			closeJob(){
				postJobStatus({
					"id": this.detail.id,
					"jobStatus": 2
				}).then(res=>{
					if(res.data){
						this.getInit()
					}
				})
			},
			openJob(){
				if(this.detail.auditStatus == 1){
					postJobStatus({
						"id": this.detail.id,
						"jobStatus": 1
					}).then(res=>{
						if(res.data){
							this.getInit()
						}
					})
				}else if(this.detail.auditStatus == 2){
					uni.showToast({
						icon: 'none',
						title: '您发布的招聘信息，平台审核未通过。暂不能开放'
					})
				}else if(this.detail.auditStatus == 0){
					uni.showToast({
						icon: 'none',
						title: '您发布的招聘信息审核中。暂不能开放'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 32rpx 40rpx;
	}
	.prompt{ padding: 24rpx 28rpx; background: rgba(232,205,167,0.1); border-radius: 12rpx;}
	.ml10{margin-left: 10rpx;}
	.card {
		// padding: 32rpx;
		margin-bottom: 40rpx;
	}
	.card .tit{line-height: 56rpx;}

	.card .con {
		line-height: 38rpx;
	}
	
	.title{line-height: 60rpx;}
	.salary{width: 200rpx;line-height: 60rpx;}
	
	.logo{ margin-right: 24rpx; width: 120rpx;height: 120rpx;border-radius: 12rpx;}
	.map{width: 670rpx;height: 352rpx;border-radius: 12rpx;}
	
	.tags {}

	.tags .tag {
		margin: 16rpx 16rpx 16rpx 0;
		padding: 0 12rpx;
		height: 48rpx;
		border-radius: 8rpx;
	}

	.line {
		margin: 32rpx 0;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}

	.btn-group-inner .btn { height: 76rpx; border-radius: 12rpx; }
	.btn-group-inner .btn +.btn{margin-left: 24rpx;}
</style>